<script type="text/ng-template" id="field-fieldset.tpl.html">
<div class="tlp-pane tlp-pane-collapsable" ng-class="{ 'tlp-pane-collapsed': field.collapsed }">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header" ng-click="modal.toggleFieldset(field)">
            <h1 class="tlp-pane-title">
                <i class="tlp-pane-title-icon fa fa-fw" ng-class="{ 'fa-caret-right': field.collapsed, 'fa-caret-down': ! field.collapsed }"></i>
                {{ field.label }}
            </h1>
        </div>
        <section class="tlp-pane-section">
            <ng-include
                src="field.template_url"
                ng-repeat="field in field.content"
            ></ng-include>
        </section>
    </div>
</div>
</script>

<script type="text/ng-template" id="field-column.tpl.html">
<ng-include
    src="field.template_url"
    ng-repeat="field in field.content"
></ng-include>
</script>

<script type="text/ng-template" id="field-linebreak.tpl.html">
<br>
</script>

<script type="text/ng-template" id="field-separator.tpl.html">
<hr>
</script>

<script type="text/ng-template" id="field-staticrichtext.tpl.html">
<div class="tlp-property">
    <div ng-bind-html="modal.values[field.field_id].default_value"></div>
</div>
</script>

<script type="text/ng-template" id="field-sb.tpl.html">
<div class="tlp-form-element">
    <label for="{{ 'tracker_field_' + field.field_id }}" class="tlp-label">
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>
    <select id="{{ 'tracker_field_' + field.field_id }}"
        class="tlp-select"
        ng-model="modal.values[field.field_id].bind_value_ids[0]"
        ng-options="field_value.id as field_value.label for field_value in field.filtered_values"
        ng-required="{{ field.required }}"
        ng-disabled="modal.isDisabled(field)"
        tuleap-highlight-directive="field.filtered_values"
    >
    </select>
</div>
</script>

<script type="text/ng-template" id="field-msb.tpl.html">
<div class="tlp-form-element">
    <label for="{{ 'tracker_field_' + field.field_id }}" class="tlp-label">
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>
    <select id="{{ 'tracker_field_' + field.field_id }}"
        class="tlp-select"
        multiple
        ng-model="modal.values[field.field_id].bind_value_ids"
        ng-options="field_value.id as field_value.label for field_value in field.filtered_values"
        ng-required="{{ field.required }}"
        ng-disabled="modal.isDisabled(field)"
        tuleap-highlight-directive="field.filtered_values"
    >
    </select>
</div>
</script>

<script type="text/ng-template" id="field-rb.tpl.html">
<div class="tlp-form-element">
    <label class="tlp-label">
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>

    <label for="{{ 'rb_' + field.field_id + '_100' }}"
        class="tlp-label tlp-radio"
        ng-if="! field.required"
    >
        <input type="radio"
            ng-model="modal.values[field.field_id].bind_value_ids[0]"
            name="{{ field.name }}"
            ng-value="100"
            ng-required="{{ field.required }}"
            ng-disabled="modal.isDisabled(field)"
            id="{{ 'rb_' + field.field_id + '_100' }}"
        >
        <span translate>None</span>
    </label>

    <label ng-repeat="field_value in field.values"
        for="{{ 'rb_' + field.field_id + '_' + field_value.id }}"
        class="tlp-label tlp-radio"
    >
        <input type="radio"
            ng-model="modal.values[field.field_id].bind_value_ids[0]"
            name="{{ field.name }}"
            ng-value="{{ field_value.id }}"
            ng-required="{{ field.required }}"
            ng-disabled="modal.isDisabled(field)"
            id="{{ 'rb_' + field.field_id + '_' + field_value.id }}"
        >
        {{ field_value.label }}
    </label>
</div>
</script>

<script type="text/ng-template" id="field-cb.tpl.html">
<div class="tlp-form-element">
    <label class="tlp-label">
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>

    <label ng-repeat="field_value in field.values"
        for="{{ 'cb_' + field.field_id + '_' + field_value.id }}"
        class="tlp-label tlp-checkbox"
    >
        <input type="checkbox"
            ng-model="modal.values[field.field_id].bind_value_ids[$index]"
            ng-true-value="{{ field_value.id | json }}"
            ng-false-value="null"
            ng-disabled="modal.isDisabled(field)"
            id="{{ 'cb_' + field.field_id + '_' + field_value.id }}"
        >
        {{ field_value.label }}
    </label>
</div>
</script>

<script type="text/ng-template" id="field-int.tpl.html">
<div class="tlp-form-element">
    <label for="{{ 'tracker_field_' + field.field_id }}"
        class="tlp-label"
    >
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>
    <input type="number"
        class="tlp-input"
        size="5"
        ng-model="modal.values[field.field_id].value"
        ng-required="{{ field.required }}"
        ng-disabled="modal.isDisabled(field)"
        id="{{ 'tracker_field_' + field.field_id }}"
    >
</div>
</script>

<script type="text/ng-template" id="field-string.tpl.html">
<div class="tlp-form-element">
    <label for="{{ 'tracker_field_' + field.field_id }}"
        class="tlp-label"
    >
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>
    <input type="text"
        class="tlp-input"
        ng-model="modal.values[field.field_id].value"
        ng-required="{{ field.required }}"
        ng-disabled="modal.isDisabled(field)"
        id="{{ 'tracker_field_' + field.field_id }}"
    >
</div>
</script>

<script type="text/ng-template" id="field-float.tpl.html">
<div class="tlp-form-element">
    <label for="{{ 'tracker_field_' + field.field_id }}"
        class="tlp-label"
    >
        {{ field.label }}
        <i ng-if="field.required" class="fa fa-asterisk"></i>
    </label>
    <input type="number"
        class="tlp-input"
        step="any"
        size="5"
        ng-model="modal.values[field.field_id].value"
        ng-required="{{ field.required }}"
        ng-disabled="modal.isDisabled(field)"
        id="{{ 'tracker_field_' + field.field_id }}"
    >
</div>
</script>

<script type="text/ng-template" id="field-text.tpl.html">
<div class="tlp-form-element">
    <div class="tuleap-artifact-modal-label-with-format">
        <label for="{{ 'tracker_field_'+field.field_id }}"
            class="tlp-label"
        >
            {{ field.label }}
            <i ng-if="field.required" class="fa fa-asterisk"></i>
        </label>
        <select ng-model="modal.values[field.field_id].value.format"
            ng-options="format.id as format.label for format in modal.text_formats"
            ng-disabled="modal.isDisabled(field)"
            id="{{ 'tracker_field_format_'+field.field_id }}"
            class="tlp-select tlp-select-small"
        ></select>
    </div>

    <textarea ng-if="modal.values[field.field_id].value.format === 'text'"
        rows="5"
        ng-model="modal.values[field.field_id].value.content"
        ng-required="{{ field.required }}"
        ng-disabled="modal.isDisabled(field)"
        class="tlp-textarea"
        id="{{ 'tracker_field_'+field.field_id }}"
    ></textarea>
    <ng-ckeditor
            id="{{ 'tracker_field_'+field.field_id }}"
            ng-if="modal.values[field.field_id].value.format === 'html'"
            ng-model="modal.values[field.field_id].value.content"
            ng-config="modal.initCkeditorConfig(field)"
            required="{{ field.required }}"
    ></ng-ckeditor>
</div>
</script>

<script type="text/ng-template" id="field-art_link.tpl.html">
<div
    class="field"
    tuleap-artifact-modal-link-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
    artifact-id="modal.artifact_id"
    tracker="modal.tracker"
    parent-artifact-id="modal.parent_artifact_id"
    parent-artifact="modal.parent"
></div>
</script>

<script type="text/ng-template" id="field-burndown.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">
        {{ field.label }}
    </label>
    <img ng-src="{{ '/plugins/tracker/?formElement='+ field.field_id +'&func=show_burndown&src_aid='+ modal.artifact_id }}"
        alt="{{ field.label }}"
        class="tuleap-artifact-modal-artifact-field-burndown-image"
    >
</div>
</script>

<script type="text/ng-template" id="field-cross.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <p ng-if="field.value.length === 0" class="empty_value" translate>References list is empty.</p>
    <ul ng-if="field.value.length > 0">
        <li ng-repeat="value in field.value">
            <a class="cross-reference" ng-href="{{ value.url }}">{{ value.ref }}</a><br>
        </li>
    </ul>
</div>
</script>

<script type="text/ng-template" id="field-aid.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <a ng-href="/plugins/tracker/?aid={{ field.value }}">#{{ field.value }}</a>
</div>
</script>

<script type="text/ng-template" id="field-atid.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <a ng-href="/plugins/tracker/?aid={{ modal.artifact_id }}">{{ field.value }}</a>
</div>
</script>

<script type="text/ng-template" id="field-priority.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <p ng-if="! field.value" class="empty_value" translate>Empty</p>
    <p ng-if="field.value" >{{ field.value }}</p>
</div>
</script>

<script type="text/ng-template" id="field-computed.tpl.html">
<div class="tlp-form-element"
    tuleap-artifact-modal-computed-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
</script>

<script type="text/ng-template" id="field-subby.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <div class="tuleap-artifact-modal-artifact-field-user">
        <div class="tlp-avatar">
            <img ng-src="{{ field.value.avatar_url }}" alt="avatar">
        </div>
        <a href="{{ field.value.user_url }}">{{ field.value.display_name }}</a>
    </div>
</div>
</script>

<script type="text/ng-template" id="field-luby.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <div class="tuleap-artifact-modal-artifact-field-user">
        <div class="tlp-avatar">
            <img ng-if="field.value.avatar_url" ng-src="{{ field.value.avatar_url }}" alt="avatar">
        </div>
        <a href="{{ field.value.user_url }}">{{ field.value.display_name }}</a>
    </div>
</div>
</script>

<script type="text/ng-template" id="field-subon.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <span>{{ field.value | amDateFormat:'YYYY-MM-DD HH:mm' }}</span>
</div>
</script>

<script type="text/ng-template" id="field-lud.tpl.html">
<div class="tlp-property">
    <label class="tlp-label">{{ field.label }}</label>
    <span>{{ field.value | amDateFormat:'YYYY-MM-DD HH:mm' }}</span>
</div>
</script>

<script type="text/ng-template" id="field-file.tpl.html">
<div
    class="tlp-form-element"
    tuleap-artifact-modal-file-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
</script>

<script type="text/ng-template" id="field-perm.tpl.html">
<div
    class="tlp-form-element"
    tuleap-artifact-modal-permission-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
</script>

<script type="text/ng-template" id="field-date.tpl.html">
<div
    class="field"
    tuleap-artifact-modal-date-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
</script>

<script type="text/ng-template" id="field-tbl.tpl.html">
<div
    ng-if="::field.bindings.type === 'static'"
    class="field"
    tuleap-artifact-modal-static-open-list-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
<div
    ng-if="::field.bindings.type === 'ugroups'"
    class="field"
    tuleap-artifact-modal-ugroups-open-list-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
<div
    ng-if="::field.bindings.type === 'users'"
    class="field"
    tuleap-artifact-modal-users-open-list-field="field"
    is-disabled="modal.isDisabled(field)"
    value-model="modal.values[field.field_id]"
></div>
</script>

<form class="tlp-modal tlp-modal-medium-sized tuleap-artifact-modal"
    ng-class="::{ 'creation-mode': modal.creation_mode, 'edition-mode': ! modal.creation_mode }"
    role="dialog"
    aria-labelledby="artifact-modal-label"
    ng-submit="modal.submit()"
>
    <div class="tlp-modal-header">
        <h1 class="tlp-modal-title tuleap-artifact-modal-title"
            id="artifact-modal-label"
            ng-if="modal.creation_mode"
            translate
        >Create a new {{ modal.title }}</h1>
        <h1 class="tlp-modal-title tuleap-artifact-modal-title"
            id="artifact-modal-label"
            ng-if="! modal.creation_mode"
        >
            <span class="tuleap-artifact-modal-title-badge tlp-badge-{{ modal.color }}">{{ modal.tracker.item_name }} #{{ modal.artifact_id }}</span>
            <span class="title">{{ modal.title }}</span>
        </h1>
        <div class="tlp-modal-close" data-dismiss="modal" aria-label="{{ Close | translate }}">&times;</div>
    </div>

    <div class="tlp-modal-body tuleap-artifact-modal-body">
        <div class="tuleap-artifact-modal-artifact">
            <div class="tlp-alert-danger" ng-if="modal.hasRestError()">
                {{ 'Error:' | translate }} {{ modal.getRestErrorMessage() }}
            </div>
            <div class="tlp-alert-info" ng-if="modal.isNewParentAlertShown()" translate>
                The artifact will be linked to {{ modal.parent.title }}.
            </div>

            <ng-include src="field.template_url" ng-repeat="field in modal.ordered_fields"></ng-include>
        </div>

        <div class="tuleap-artifact-modal-followups"
            ng-if="! modal.creation_mode"
            ng-class="{'invert-order': modal.followups_comments.invert_order === 'desc' }"
        >
            <h2 class="tlp-modal-subtitle tuleap-artifact-modal-followups-title"
                title="{{ 'Only comments are displayed' | translate }}"
            >
                <i class="fa fa-comments-o tuleap-artifact-modal-followups-title-icon"></i><span translate>Follow-ups</span>
            </h2>

            <div class="tuleap-artifact-modal-followups-comments">
                <div ng-repeat="comment in modal.followups_comments.content track by $index"
                    class="tuleap-artifact-modal-followups-comment"
                >
                    <div class="tuleap-artifact-modal-followups-comment-header">
                        <div class="tlp-avatar">
                            <img ng-src="{{ comment.submitted_by_details.avatar_url }}">
                        </div>

                        <div class="tuleap-artifact-modal-followups-comment-header-authors tlp-text-muted" ng-class="{'multiple-authors': comment.submitted_on !== comment.last_modified_date}">
                            <div class="tuleap-artifact-modal-followups-comment-header-author">
                                <a ng-if="comment.email" href="mailto:{{comment.email}}">{{ comment.email }}</a>
                                <a ng-if="! comment.email" href="{{ comment.submitted_by_details.user_url }}">{{ comment.submitted_by_details.display_name }}</a>
                                <span class="tuleap-artifact-modal-followups-comment-header-time" am-time-ago="comment.submitted_on"></span>
                            </div>

                            <div ng-if="comment.submitted_on !== comment.last_modified_date"
                                class="tuleap-artifact-modal-followups-comment-header-author"
                            >
                                <span><span translate>Edited by</span> {{ comment.last_modified_by.display_name }}</span>
                                <span class="tuleap-artifact-modal-followups-comment-header-time" am-time-ago="comment.last_modified_date"></span>
                            </div>
                        </div>
                    </div>

                    <div class="tuleap-artifact-modal-followups-comment-content" ng-bind-html="comment.last_comment.post_processed_body"></div>
                </div>

                <div ng-if="modal.followups_comments.loading_comments" class="tuleap-artifact-modal-followups-comments-loading"></div>
                <div ng-if="! modal.followups_comments.loading_comments && modal.followups_comments.content.length === 0" class="tuleap-artifact-modal-followups-comments-empty" translate>No follow-ups</div>
            </div>

            <div class="tuleap-artifact-modal-followups-add-form" ng-if="modal.isFollowupCommentFormDisplayed()">
                <div class="tuleap-artifact-modal-label-with-format">
                    <label class="tlp-label" for="followup_comment">
                        {{ 'Comment' | translate }}
                    </label>

                    <select id="followup-comment-format"
                        ng-model="modal.followup_comment.format"
                        ng-options="format.id as format.label for format in modal.text_formats"
                        class="tlp-select tlp-select-small"
                    ></select>
                </div>
                <textarea id="followup_comment"
                    ng-if="modal.followup_comment.format === 'text'"
                    ng-model="modal.followup_comment.body"
                    class="tlp-textarea"
                    placeholder="{{ 'Add a new comment' | translate }}"
                    rows="3"
                ></textarea>
                <ng-ckeditor
                    ng-if="modal.followup_comment.format === 'html'"
                    ng-model="modal.followup_comment.body"
                    ng-config="modal.initCkeditorConfig()"
                ></ng-ckeditor>
            </div>
        </div>
    </div>

    <div class="tlp-modal-footer">
        <div class="angular-artifact-modal-disk-usage"
            tuleap-artifact-modal-quota-display
            disk-usage-empty="modal.is_disk_usage_empty"
            ng-if="modal.isThereAtLeastOneFileField()"
        ></div>
        <button type="button"
            class="tlp-button-primary tlp-button-outline tlp-modal-action"
            data-dismiss="modal"
            translate
        >
            Cancel
        </button>
        <input
            type="submit"
            class="tlp-button-primary tlp-modal-action"
            value="{{ 'Save changes' | translate }}"
        >
    </div>
</form>
